<template>
  <el-container>
    <el-header>
      <h3>{{ restaurant.name }} 详情</h3>
    </el-header>

    <el-main>
      <el-card>
        <!-- 修改图片路径，确保路径正确 -->
        <img :src="'/images/' + restaurant.image" class="restaurant-detail-img" />
        <div class="restaurant-detail-info">
          <h3>{{ restaurant.name }}</h3>
          <p>{{ restaurant.description }}</p>
          <p>评分: {{ restaurant.rating }}</p>
          <h4>菜品列表</h4>
          <el-row>
            <el-col :span="8" v-for="(dish, index) in restaurant.dishes" :key="index">
              <el-card :body-style="{ padding: '10px' }">
                <!-- 修改菜品图片路径 -->
                <img :src="'/images/' + dish.image" class="dish-img" />
                <p>{{ dish.name }} - ¥{{ dish.price }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import restaurantImage1 from '../assets/restaurant1.jpg';
import restaurantImage2 from '../assets/restaurant2.jpg';
import restaurantImage3 from '../assets/restaurant3.jpg';
import dish1 from '../assets/dish1.jpg';
import dish2 from '../assets/dish2.jpg';


export default {
  data() {
    return {
      restaurant: {
        name: '',
        image: '',
        description: '',
        rating: 0,
        dishes: [],
      },
    };
  },
  methods: {
    fetchRestaurantDetails(id) {
      // 这里模拟数据请求，你可以将它替换为实际的API请求
      const allRestaurants = [
        {
          id: 1,
          name: '餐厅A',
          image: restaurantImage1,  // 修改为相对路径
          description: '美味的餐厅，提供各种美食。',
          rating: 4.5,
          dishes: [
            { name: '菜品1', price: 30, image: dish1 },  // 修改为相对路径
            { name: '菜品2', price: 40, image: dish2 },  // 修改为相对路径
          ]
        },
        {
          id: 2,
          name: '餐厅B',
          image: restaurantImage2,  // 修改为相对路径
          description: '新鲜的食材，给你无与伦比的体验。',
          rating: 4.7,
          dishes: [
            { name: '菜品1', price: 35, image: dish1 },  // 修改为相对路径
            { name: '菜品2', price: 45, image: dish2 },  // 修改为相对路径
          ]
        },
        {
          id: 3,
          name: '餐厅C',
          image: restaurantImage3,  // 修改为相对路径
          description: '优质的服务，温馨的环境。',
          rating: 4.8,
          dishes: [
            { name: '菜品1', price: 50, image: dish1 },  // 修改为相对路径
            { name: '菜品2', price: 60, image: dish2 },  // 修改为相对路径
          ]
        },
      ];

      // 根据 ID 获取餐厅详情
      this.restaurant = allRestaurants.find(r => r.id === Number(id)) || {};
    },
  },
  mounted() {
    const { id } = this.$route.params;
    this.fetchRestaurantDetails(id);
  },
};
</script>

<style scoped>
.restaurant-detail-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.dish-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
</style>
